<template>
  <div :class="['status-card', statusClass]">
    <div class="status-count">
      <text>{{ count }}</text> 次
    </div>
  </div>
  <div class="status-text">{{ status }}</div>
</template>

<script setup lang="ts">
defineProps({
  count: Number,
  status: String,
  statusClass: String,
})
</script>

<style scoped lang="scss">
.status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140rpx;
  height: 80rpx;
  border-radius: 20px;
  color: white;
  margin: 0 10px;
}

.status-count {
  font-weight: bold;
  font-weight: 500;
  font-size: 30rpx;
  text {
    font-size: 50rpx;
  }
}

.status-text {
  font-size: 30rpx;
  text-align: center;
  margin-top: 10rpx;
}

.completed {
  background: linear-gradient(to right, #00c853, #4caf50); /* 绿色渐变 */
}

.in-progress {
  background: linear-gradient(to right, #ffc107, #ff9800); /* 橙色渐变 */
}

.paused {
  background: linear-gradient(to right, #bdbdbd, #9e9e9e); /* 灰色渐变 */
}
</style>
